<template>
  <div class="content-box">
    <!-- 顶部搜索 -->
    <search-box @showPopup="showPopupFn" />
    <!-- 轮播图组件 -->
    <swipe-box :list="bannerList" :imgStr="'image_url'" height="200px" />
    <!-- 九宫格组件 -->
    <grid-box
      @gridFn="(v) => $router.push(`/channel/${v}`)"
      :list="channelList"
    />
    <!-- 品牌方组件 -->
    <brand
      :list="brandList"
      @gotoBrand="(v) => $router.push(`/brand/${v}`)"
    ></brand>
    <!-- 新品首发组价 -->
    <goodsList :title="'周一周四 · 新品'" :list="newGoodsList"></goodsList>
    <!-- 热门商品组件 -->
    <hot-goods-list :list="hotGoodsList" :title="'人气推荐'"></hot-goods-list>
    <!-- 专题商品组件 -->
    <topic-list :list="topicList" :title="'专题精选'"></topic-list>
    <!-- 商品组件 -->
    <goodsList
      v-for="item in categoryList"
      :key="item.id"
      :title="item.name"
      :list="item.goodsList"
    ></goodsList>

    <!-- 返回顶部 -->
    <back-top></back-top>
  </div>
</template>

<script>
import brand from '@/views/home/brand.vue'
import { getHomeLists } from '@/api/home.js'
export default {
  name: 'HomeBar',
  components: {
    brand
  },
  data () {
    return {
      bannerList: [], // 轮播图数组
      channelList: [], // 九宫格数据
      brandList: [], // 品牌方组件
      newGoodsList: [], // 新品首发
      categoryList: [],
      hotGoodsList: [],
      topicList: []
    }
  },
  created () {
    this.getHomeList()
  },
  methods: {
    // 获取首页内容
    async getHomeList () {
      const res = await getHomeLists()
      this.bannerList = res.data.banner
      this.channelList = res.data.channel
      this.brandList = res.data.brandList
      this.newGoodsList = res.data.newGoodsList
      this.categoryList = res.data.categoryList
      this.hotGoodsList = res.data.hotGoodsList
      this.topicList = res.data.topicList
    },
    // 点击显示search popup
    showPopupFn () {
      this.$router.push('/home/popup')
    }
  }
}
</script>

<style lang='less' scoped>
</style>
